<template>
  <div class="app-container d-flex">
    <div class="h-100 w-7">
      <div class="h-2 w-100 d-flex">
        <!-- 1号楼3层 本月系统评分 -->
        <div class="h-100 width-28 p10">
          <div class="h-100 w-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">1号楼3层本月系统评分</div>
              </div>
            </div>
            <div class="item_content d-flex-center-jb2 pt-3 pb-2">
              <div class="font_impact" :class="colorData[oneData.createBy]">{{oneData.point}}</div>
              <div class="font-white font-14">更新时间：{{oneData.createTime}}</div>
            </div>
          </div>
        </div>
        <!-- 1号楼3层 扣分事项列表 -->
        <div class="h-100 width-71 p10">
          <div class="h-100 w-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">1号楼3层扣分事项列表</div>
              </div>
            </div>
            <div class="item_content pt-2">
              <noData v-if="tableData1.length==0"></noData>
              <template v-else>
                <div class="w-100 h-100">
                  <div
                    class="d-flex justify-content-around align-items-center font-white font-weight-bold height-40p warning-row">
                    <div class="w-1 d-flex-center">序号</div>
                    <div class="w-3 d-flex-center">扣分类型</div>
                    <div class="w-3 d-flex-center">扣分分数</div>
                    <div class="w-3 d-flex-center">扣分时间</div>
                  </div>
                  <div class="font-white height-40p-calc over-auto-y">
                    <div class="d-flex justify-content-around align-items-center height-30p"
                         v-for="(item,index) in tableData1"
                         :key="index" :class="index % 2 == 0 ? 'success-row' : 'warning-row'">
                      <div class="w-1 d-flex-center">{{index + 1}}</div>
                      <div class="w-3 d-flex-center">{{item.pointType}}</div>
                      <div class="w-3 d-flex-center warning_fs">{{-item.point}}</div>
                      <div class="w-3 d-flex-center">{{item.pointTime}}</div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼3层 事件动态列表 -->
      <div class="h-4 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼3层事件动态列表</div>
            </div>
          </div>
          <div class="item_content">
            <noData v-if="tableData2.length==0"></noData>
            <template v-else>
              <div class="w-100 h-100">
                <div
                  class="d-flex justify-content-around align-items-center font-white font-weight-bold height-40p warning-row">
                  <div class="w-60p d-flex-center">序号</div>
                  <div class="w-3 d-flex-center">设备名称</div>
                  <div class="w-2 d-flex-center">合分动作</div>
                  <div class="w-2 d-flex-center">状态</div>
                  <div class="w-3 d-flex-center">操作人</div>
                  <div class="w-3 d-flex-center">操作类型</div>
                  <div class="w-3 d-flex-center">下发时间</div>
                </div>
                <div class="font-white height-40p-calc over-auto-y">
                  <div class="d-flex justify-content-around align-items-center height-30p"
                       v-for="(item,index) in tableData2"
                       :key="index" :class="index % 2 == 0 ? 'success-row' : 'warning-row'">
                    <div class="w-60p d-flex-center">{{index + 1}}</div>
                    <div class="w-3 d-flex-center">{{item.deviceTypeName}}</div>
                    <div class="w-2 d-flex-center">{{item.openStatus}}</div>
                    <div class="w-2 d-flex-center" :class="tableColor[item.deviceStatus].color">
                      {{tableColor[item.deviceStatus].name}}
                    </div>
                    <div class="w-3 d-flex-center">{{item.operatorName}}</div>
                    <div class="w-3 d-flex-center">
                      {{item.operatorType=='person'?'远程控制':'系统控制'}}
                    </div>
                    <div class="w-3 d-flex-center">{{item.createTime}}</div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 1号楼3层 本月故障信息 -->
    <div class="h-100 w-5 p10">
      <div class="h-100 w-100 item_border p10">
        <div class="item_title2">
          <div class="d-flex align-items-center">
            <div class="success_point"></div>
            <div class="font-white font-14">1号楼3层本月故障信息</div>
          </div>
        </div>
        <div class="item_content2">
          <div class="h-2 w-100 pb-3">
            <noData v-show="fiveCardData.fraction==0"></noData>
            <div class="h-100 w-100" v-show="fiveCardData.fraction>0">
              <div class="h-100 w-100" id="safety"></div>
            </div>
          </div>
          <div class="h-4 w-100">
            <noData v-if="tableData3.length==0"></noData>
            <template v-else>
              <div class="w-100 h-100">
                <div
                  class="d-flex justify-content-around align-items-center font-white font-weight-bold height-40p warning-row">
                  <div class="w-1 d-flex-center">序号</div>
                  <div class="w-3 d-flex-center">设备名称</div>
                  <div class="w-3 d-flex-center">故障名称</div>
                  <div class="w-3 d-flex-center">故障时间</div>
                </div>
                <div class="font-white height-40p-calc over-auto-y">
                  <div class="d-flex justify-content-around align-items-center height-30p"
                       v-for="(item,index) in tableData3"
                       :key="index" :class="index % 2 == 0 ? 'success-row' : 'warning-row'">
                    <div class="w-1 d-flex-center">{{index + 1}}</div>
                    <div class="w-3 d-flex-center">{{item.deviceName}}</div>
                    <div class="w-3 d-flex-center">{{item.gzName}}</div>
                    <div class="w-3 d-flex-center">{{item.gzTime}}</div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import noData from '@/components/noData'
  import charts from './chart.js'
  import {
    queryOneListSafeByNum,
    queryTwoListSafeByReport,
    queryThreeListSafeByReport,
    queryFourListSafeByReport,
    queryFiveListSafeByReport
  } from "@/api/dormOneBuildingThreeFloor/safety"

  export default {
    components: {noData},
    data() {
      return {
        timeout: [],
        oneData: {},
        colorData: ['success_fs', 'warning_fs', 'danger_fs'],

        tableData1: [],
        tableData2: [],
        tableData3: [],
        tableColor: [
          {color: '', name: ''},
          {color: 'table_color_success', name: '指令发送成功'},
          {color: 'table_color_primary', name: '指令发送成功等待核验'},
          {color: 'table_color_success', name: '操作成功'},
          {color: 'table_color_warning', name: '操作失败核验超时'},
          {color: 'table_color_danger', name: '故障分闸'}
        ],
        config1: {
          data: [],
          header: ['扣分类型', '扣分分数', '扣分时间'],
          rowNum: 3, //表格行数
          headerHeight: 50, //表头高度
          headerBGC: '#204B5D', //表头
          // oddRowBGC: '', //奇数行
          // evenRowBGC: '', //偶数行
          index: true, //显示行号
          columnWidth: [50], //列宽度
          align: ['center', 'center', 'center', 'center', 'center', 'center'] //列对齐方式
        },
        config2: {
          data: [],
          header: ['设备名称', '合分动作', '状态', '操作人', '操作类型', '下发时间'],
          rowNum: 8, //表格行数
          headerHeight: 35, //表头高度
          headerBGC: '#204B5D', //表头
          // oddRowBGC: '', //奇数行
          // evenRowBGC: '', //偶数行
          index: true, //显示行号
          columnWidth: [60, 300, 100, 200, 300], //列宽度
          align: ['center', 'center', 'center', 'center', 'center'] //列对齐方式
        },
        config3: {
          data: [],
          header: ['设备名称', '故障名称', '故障时间'],
          rowNum: 8, //表格行数
          headerHeight: 50, //表头高度
          headerBGC: '#204B5D', //表头
          // oddRowBGC: '#204B5D', //奇数行
          // evenRowBGC: '', //偶数行
          index: true, //显示行号
          columnWidth: [50, 250, 200, 200], //列宽度
          align: ['center', 'center', 'center', 'center', 'center'] //列对齐方式
        },
        fiveCardData: {
          fraction: 1,
          data: [],
        }
      }
    },
    created() {

    },
    mounted() {
      setTimeout(() => {
        this.queryFourListSafeByReport()
      }, 500)

      this.queryOneListSafeByNum()
      this.queryTwoListSafeByReport()
      this.queryThreeListSafeByReport()
      this.queryFiveListSafeByReport()


      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryTwoListSafeByReport()
        _this.queryThreeListSafeByReport()
        _this.queryFiveListSafeByReport()
      }, 15000);

      this.timeout[1] = setInterval(() => {
        _this.queryOneListSafeByNum()()
        _this.queryFourListSafeByReport()
      }, 600000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListSafeByNum() {
        queryOneListSafeByNum().then(res => {
          let tempData = res.object || {}
          this.oneData = tempData
          if (this.oneData.point >= 80) {
            this.oneData.createBy = 0
          } else if (this.oneData.point >= 60 && this.oneData.point < 80) {
            this.oneData.createBy = 1
          } else {
            this.oneData.createBy = 2
          }
        })
      },

      queryTwoListSafeByReport() {
        queryTwoListSafeByReport().then(res => {
          let tempData = res.object || []
          this.tableData1 = tempData
          // let arr = []
          // for (let i = 0; i < tempData.length; i++) {
          //   let arr2 = []
          //   for (const resKey in tempData[i]) {
          //     if (resKey == 'pointType') {
          //       arr2[0] = tempData[i][resKey]
          //     } else if (resKey == 'point') {
          //       arr2[1] = tempData[i][resKey]
          //     } else {
          //       arr2[2] = tempData[i][resKey]
          //     }
          //   }
          //   arr.push(arr2)
          // }
          //
          // this.$set(this.config1, "data", arr)
        })
      },

      queryThreeListSafeByReport() {
        queryThreeListSafeByReport().then(res => {
          let tempData = res.object || []
          this.tableData2 = tempData

          // let arr = []
          // for (let i = 0; i < tempData.length; i++) {
          //   let arr2 = []
          //   for (const resKey in tempData[i]) {
          //     if (resKey != 'deviceLocal') {
          //       if (resKey == 'deviceStatus') {
          //         if (tempData[i][resKey] == '1') {
          //           arr2.push('<span style="color:#07C160;">指令发送成功</span>')
          //         } else if (tempData[i][resKey] == '2') {
          //           arr2.push('<span style="color:#0755b4;">指令发送成功等待核验</span>')
          //         } else if (tempData[i][resKey] == '3') {
          //           arr2.push('<span style="color:#07C160;">操作成功</span>')
          //         } else {
          //           arr2.push('<span style="color:#FE612F;">操作失败核验超时</span>')
          //         }
          //       } else {
          //         arr2.push(tempData[i][resKey])
          //       }
          //     }
          //   }
          //   arr.push(arr2)
          // }
          //
          // this.$set(this.config2, "data", arr)
        })
      },

      queryFourListSafeByReport() {
        queryFourListSafeByReport().then(res => {
          let tempData = res.object || []

          let tempData2 = []
          let fraction = 0
          for (let i = 0; i < tempData.length; i++) {
            tempData2.push({
              value: parseFloat(tempData[i].yValue),
              name: tempData[i].xValue,
            })
            fraction += Number(tempData[i].yValue)
          }

          this.fiveCardData.data = tempData2
          this.fiveCardData.fraction = fraction

          charts.pieEchart('safety', this.fiveCardData)
        })
      },

      queryFiveListSafeByReport() {
        queryFiveListSafeByReport().then(res => {
          let tempData = res.object || []
          this.tableData3 = tempData

          // let arr = []
          // for (let i = 0; i < tempData.length; i++) {
          //   let arr2 = []
          //   for (const resKey in tempData[i]) {
          //     if (resKey == 'deviceName') {
          //       arr2[0] = tempData[i][resKey]
          //     } else if (resKey == 'gzName') {
          //       arr2[1] = tempData[i][resKey]
          //     } else {
          //       arr2[2] = tempData[i][resKey]
          //     }
          //   }
          //   arr.push(arr2)
          // }
          //
          // this.$set(this.config3, "data", arr)
        })
      },

    }
  }
</script>
<style lang="scss" scoped>
  .height-40p {
    height: 44px;
  }

  .height-30p {
    height: 40px;
  }

  .height-40p-calc {
    height: calc(100% - 40px);
  }

  .height-45 {
    height: 45%;
  }

  .width-28 {
    width: 28.56%;
  }

  .width-71 {
    width: 71.44%;
  }

  .content_unit {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
    padding-bottom: 4px;
  }

  .font_impact {
    font-family: Impact, Impact-400;
    font-weight: 400;
    font-size: 128px;
  }

  .success_fs {
    color: #10FF82;
  }

  .warning_fs {
    color: #FED52F;
  }

  .danger_fs {
    color: #DF547B;
  }

  .table_color_success {
    color: #07C160;
  }

  .table_color_warning {
    color: #debc10;
  }

  .table_color_danger {
    color: #e30a35;
  }

  .table_color_primary {
    color: #0755b4;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .warning-row {
    background: #0B414D;
  }

  .success-row {
    background: #204B5D;
  }
</style>
